<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab切换</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 670px;
            height: 280px;
            margin: 100px auto;
            background-image: url(./img/1.jpg);
            position: relative;
        }

        .foot {
            width: 80px;
            height: 20px;
            position: absolute;
            right: 50px;
            bottom: 20px;
            display: flex;
            justify-content: space-between;
        }

        .title {
            width: 20px;
            height: 20px;
            background-color: gray;
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
        }
        .left{
            position: absolute;
            left: 0;
            top: 50%;
        }
        .right{
            position: absolute;
            right: 0;
            top: 50%;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="foot">
            <div class="title">1</div>
            <div class="title">2</div>
            <div class="title">3</div>    
        </div>
    </div>
</body>

</html>
<script>
    let titles = document.querySelectorAll('.title')
    let arr = [
        "./img/1.jpg",
        "./img/2.jpg",
        "./img/3.jpg"   
    ]
    let index = 0
    for (let i = 0; i < titles.length; i++) {
        titles[i].onclick = function(){
            var index = i
            console.log(index)
            this.parentNode.parentNode.style.backgroundImage = `url(${arr[i]})`
        }
    }
    
    let left = document.querySelector('.left')
    let right = document.querySelector('.right')
    left.onclick = function() {
        console.log(index)
    }
</script>